<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-page-title">{{ pageName }}</span>
      </div>
      <el-card class="card my-[10px] !border-none table-search-wrap" shadow="never">
        <el-form
          :model="configFrom"
          ref="searchFormRef"
          label-width="160"
          class="grid grid-cols-2 gap-4"
        >
          <el-form-item label="贡献值明细" prop="contribution_point">
            <el-switch
              v-model="configFrom.contribution_point"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
          <el-form-item label="可用积分明细" prop="available_point">
            <el-switch
              v-model="configFrom.available_point"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
          <el-form-item label="团队绩效奖励佣金明细" prop="range_point">
            <el-switch
              v-model="configFrom.range_point"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
          <el-form-item label="分销佣金明细" prop="fenxiao_point">
            <el-switch
              v-model="configFrom.fenxiao_point"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
          <el-form-item label="绿色积分佣金明细" prop="divvy_point">
            <el-switch
              v-model="configFrom.divvy_point"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
          <el-form-item label="星星豆明细" prop="digital_asset">
            <el-switch
              v-model="configFrom.digital_asset"
              active-text="显示"
              inactive-text="隐藏"
            />
          </el-form-item>
        </el-form>
        <div class="flex justify-center">
          <el-button type="primary" @click="saveAuth" :loading="authLoading"
            >保存</el-button
          >
        </div>
      </el-card>
    </el-card>
    <el-card class="box-card !border-none mt-[20px]" shadow="never">
      <div class="flex justify-between items-center mb-[20px]">
        <span class="text-page-title">积分手续费</span>
      </div>
      <el-form :model="transFrom" ref="searchFormRef" label-width="100">
        <div class="flex">
          <el-form-item label="兑换手续费" prop="gold_coupons">
            <el-input-number
              v-model="transFrom.gold_coupons"
              :min="0"
              :max="100"
              :step="0.1"
              :precision="1"
              placeholder="请输入转账手续费"
            />
            <span class="text-[#999] ml-2">%</span>
          </el-form-item>
          <el-form-item label="转账手续费" prop="rate" class="ml-[50px]">
            <el-input-number
              v-model="transFrom.rate"
              :min="0"
              :max="100"
              :step="0.1"
              :precision="1"
              placeholder="请输入转账手续费"
            />
            <span class="text-[#999] ml-2">%</span>
          </el-form-item>
        </div>
        <div class="flex justify-between items-center mb-[20px]">
          <span class="text-page-title">星星豆设置</span>
        </div>
        <divv class="flex">
          <el-form-item prop="gold_coupons">
            <template #label>
              <div class="flex items-center">
                <span>自动兑换</span>
                <el-popover
                  placement="top"
                  content="可用积分兑换兑换券时，自动将30%可用积分按比例兑换为星星豆。"
                  width="300"
                  effect="dark"
                >
                  <template #reference>
                    <el-icon><Warning /></el-icon>
                  </template>
                </el-popover>
              </div>
            </template>
            <div class="w-[170px]">
              <el-switch
                v-model="transFrom.digital_asset_switch"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                active-text="开启"
                inactive-text="关闭"
                inactive-color="#ff4949"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="transFrom.digital_asset_switch"
            prop="digital_asset_rate"
            class="ml-[50px]"
          >
            <template #label>
              <div class="flex items-center">
                <span>比例</span>
                <el-popover
                  placement="top"
                  :content="`当可用分转兑换券时，30%可用积分按照${transFrom.digital_asset_rate}:1的比例兑换为星星豆。`"
                  width="300"
                  effect="dark"
                >
                  <template #reference>
                    <el-icon><Warning /></el-icon>
                  </template>
                </el-popover>
              </div>
            </template>
            <div class="flex items-center">
              <el-input-number
                v-model="transFrom.digital_asset_rate"
                :min="0"
                :max="100"
                :precision="1"
                placeholder="请输入自动兑换比例"
              />
              <span class="text-[#999] ml-2">:1</span>
            </div>
          </el-form-item>
        </divv>
        <el-form-item>
          <el-button
            type="primary"
            class="ml-[180px]"
            @click="saveRate"
            :loading="transLoading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import {
  getDetailControl,
  putDetailControl,
  getTransRate,
  putTransRate,
} from "@/app/api/member";
const route = useRoute();
const pageName = route.meta.title as string;
const configFrom = reactive({
  contribution_point: false, // 贡献值明细
  available_point: false, // 可用积分明细
  range_point: false, // 团队绩效奖励佣金明细
  fenxiao_point: false, // 分销佣金明细
  divvy_point: false, // 绿色积分佣金明细
  digital_asset: false, // 星星豆明细
});
const transFrom = reactive({
  rate: 0, // 转账手续费
  gold_coupons: 0, // 兑换手续费
  digital_asset_switch: 0, // 星星豆自动兑换
  digital_asset_rate: 1, // 星星豆自动兑换比例
});

// 保存配置
const authLoading = ref(false);
const transLoading = ref(false);

onMounted(() => {
  getDetail();
  getTransInfo();
});

// 获取配置详情
const getDetail = () => {
  getDetailControl().then((res) => {
    Object.assign(configFrom, res.data);
  });
};

// 获取积分转账手续费
const getTransInfo = () => {
  getTransRate().then((res) => {
    Object.assign(transFrom, res.data);
  });
};

// 保存权限配置
const saveAuth = () => {
  authLoading.value = true;
  putDetailControl(configFrom)
    .then(() => {
      ElMessage.success("保存成功");
    })
    .finally(() => {
      authLoading.value = false;
    });
};

// 保存转账手续费比例
const saveRate = () => {
  transLoading.value = true;
  putTransRate(transFrom)
    .then(() => {
      ElMessage.success("保存成功");
    })
    .finally(() => {
      transLoading.value = false;
    });
};
</script>
<style lang="scss" scoped></style>
